<template>
	<view ref='MainPage' class="teachmain">
			<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
				<view class="cu-bar fixed" >
					<view class="action" @tap="$wanlshop.back(1)">
						<text class="wlIcon-fanhui1"></text>
					</view>
					<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
						<!-- 考试复习 -->
					</view>
					<!-- <view class="action" @tap="showModal('share')">
						<text class="wlIcon wlIcon-fenxiang"></text>
					</view> -->
				</view>
			</view>
			<view v-show="!finishBtn"  class="examItem">
				<view class="">
					练习结束
				</view>
				<view class="">
					
					共{{examList.length}}道题，
					回答正确<text style="color: #007EFF;">{{examList.length-WrongNum}}</text>道题，
					错误 <text style="color: #E81A24;" >{{WrongNum}}</text>道题；
					正确率{{(examList.length-WrongNum)/examList.length.toFixed(2)*100}}%。
				</view>
			</view>
			<view v-for="(i,n) in examList" :key='n' class="examItem">
				<exam-modal
				 ref='examModal'
				:info = 'i'	
				:index='n'
				:daAn='i.extend.daan'
				:daAnDesc='i.analysis'
				:choses = 'i.extend.extend_SA'
				@sendAnswer='receiveAnswer'
				/>
			</view>
			<view v-show="finishBtn" class="">
					<button @click="FinishPractice" class="finish" type="default">完成练习</button>
			</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import  ExamModal  from './components/ExamModal.vue'

	export default {
		components: {
			ExamModal
		},
		computed: {
			
		},

		data() {
			return {
				headHeight: 75,
				windowHeight: 0,
				examList:[],
				headTop: 0,
				page:1,
				value:'1',
				teacherList:[],
				WrongNum:0,
				finishBtn:true,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				}
			};
		},
		created() {
			this.getListData(this.$route.query.id)
		},
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarTextStyle : '',
					backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarBackgroundColor : ''
				});
			}, 200);
			
		},
		onReady() {
			// 判断网络类型

		},
		methods: {
			
			change(e) {
				console.log(e);
			},
			getListData(id){
				let vm =this
				vm.$api.get({ 
					url: '/topic/getTopicList?topic_cate_id='+id,
				
					success: res => {
						console.log(res)
					vm.examList = res	
						// this.BannerList = res.banner
					}
				})
			},
				
			receiveAnswer(value){
				console.log(value)
				this.finishBtn=false	
				if(value.IsWrong){
					this.WrongNum++
				}
				document.body.scrollTop = document.documentElement.scrollTop = 0;
				// this.$refs.MainPage.scrollTop(0)
			},
			FinishPractice(){
							console.log(this.$refs.examModal)
					let  allchild = this.$refs.examModal
						
					allchild.forEach((item,n)=>{
						this.$refs.examModal[n].judge()
						
					})
				
				
			}
			
		
		
		
		}
	};
</script>

<style lang="scss">
		
	body{
		background: #fff!important;
	}
	.teachmain{
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 20rpx;
	}
	.fixed{
		background: #fff;
		    height: 90rpx;
	}
	.examItem{
		margin: 30rpx;
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		line-height: 40rpx;
		color: #333333;
		// width: 690rpx;
		// height: 80rpx;
		// background: rgba(245, 245, 245, 0.39);
		// opacity: 1;
		//     margin: 20rpx auto;
		//     line-height: 80rpx;
		//     padding: 0 20rpx;
		//     font-size: 28rpx;
		//     font-family: PingFang SC;
		//     font-weight: bold;
		    
		//     color: #222222;
		//     opacity: 1;
	}
		
	.finish{
		margin: 20rpx auto;
		width: 248rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 2rpx solid #999999;
		opacity: 1;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		line-height: 60rpx;
	}

	
	
</style>
